<template>
  <div class="banner">
    <el-carousel height="500px" v-if="state.banner_list != null">
      <el-carousel-item
          v-for="(item, index) in state.banner_list"
          :key="index"
      >
        <a :href="item.link">
          <img :src="item.image">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {reactive, onMounted} from "vue"

import {getBanners} from "@/api/home";

export default {
  name: "Banner",
  setup() {
    const state = reactive({
      banner_list: []
    })

    onMounted(() => {
      getBanners().then(res => {
        state.banner_list = res.data
      })
    })
    return {
      state
    }
  }
}
</script>

<style scoped>
.banner{
  width: 100%;
  height: 500px;
}
.banner img{
  width: 100%;
  height:500px;
}
</style>